<template>
  <div id="driving-line-amap-container">
    <div class="amapClass" id="driving-line-amap" />
  </div>
</template>

<script>
  const AMap = window.AMap;
  export default {
    name: 'AMap',
    props: {
      lineArray:{
          type: Array,
      }
    },
    data() {
      return {
        defaultCity: '厦门',
        // 地图对象
        map: null,
        // 定位默认地址 | 搜索后选择的地址
        formattedAddress: null,
        // 地图标记
        driving: '',
        // 地址解析（正向）
        geocoder: '',
        lonlat:'',
      };
    },
    watch: {
      lineArray(){
        this.drawDrivingLine(this.lineArray);
      }
    },
    mounted() {
      // 初始化地图页面
      this.initMap();
    },
    beforeDestroy() {
      // 销毁地图
      this.map.destroy();
    },
    methods: {
      //   初始化地图页面
      initMap() {
        this.map = new AMap.Map('driving-line-amap', {
          resizeEnable: true,
          zoom: 15
        });
        // 添加工具栏
        this.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye','AMap.Driving'], () => {
          // 工具条
          const toolbar = new AMap.ToolBar();
          // 比例尺
          const scale = new AMap.Scale();
          // 显示鹰眼
          const hawkEye = new AMap.HawkEye({isOpen:true});
          this.map.addControl(toolbar);
          this.map.addControl(scale);
          this.map.addControl(hawkEye);


        });

        // this.map.plugin(['AMap.Driving'],function() {
          //LEAST_TIME[0],LEAST_FEE[1],LEAST_DISTANCE[2],REAL_TRAFFIC[4]

        // })
      },
      drawDrivingLine(line){
        let that = this;
        if(null != line && undefined != line && [] != line){
          line.forEach(function(item,index){
            that.driving = new AMap.Driving({
              map:that.map,
              showTraffic:false,
              autoFitView:true,
            });
            that.driving.setPolicy(item.policy);
            that.driving.search(eval(item.origin),eval(item.destination),{waypoints:eval(item.waypoints)}, function(status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                  //这里status === 'complete'的时候证明线路已经成功渲染了，但是因为我的业务需求，需要把线路的颜色改变一下，所以我把得到的线路路径的经纬度拿到做了处理
                  const { routes = [] } = result //所有线路点的集合
                  const { steps = [] } = routes[0]

                  const pathArr = []
                  steps.map(i => {
                    pathArr.push(i.path)
                    return pathArr
                  })
                  const path = that.flatten(pathArr) //通过合并数组的方法，得到所有点的集合

                  // 绘制轨迹，利用折线类方法进行渲染
                  const polyline = new window.AMap.Polyline({
                    map: that.map,
                    path,
                    showDir: true,
                    strokeColor: item.level == '0' ? '#459c50' : '#9ac799',  // 线颜色，这里颜色做了判断，让当前选中的线路颜色比没有选中的颜色深一些，类似于高德的地图路线推荐
                    strokeOpacity: 1,     // 线透明度
                    strokeWeight: 10,      // 线宽
                    strokeStyle: 'solid',  // 线样式
                    lineJoin: 'round',  // 折线拐点的绘制样式
                    zIndex: item.level == '0' ? 999 : 200,//
                  })
                  // const distance = (result.routes[0].distance / 1000).toFixed(1) //这个可以知道总里程，单位为米，所以我处理了一下
                  // const time = that.toHourMinute(parseInt(result.routes[0].time / 60)) //这个可以知道总时间，同样我处理成了小时和分钟

                } else {
                  console.info(result)
                }
            });
          })
        }
        that.map.setFitView();
      },
      flatten (arr) { // 合并多个数组
        const result = []
        for (let i = 0; i < arr.length; i++) {
          for (let j = 0; j < arr[i].length; j++) {
            result.push(arr[i][j])

          }
        }
        return result
      },
      toHourMinute (minutes) {
        return (Math.floor(minutes / 60) + '小时' + (minutes % 60) + '分')
      }
    }
  };
</script>

<style lang="scss">
  #driving-line-amap-container {
    #driving-line-amap {
      height: 60vh;
      width: 100%;
      border: 1px solid #ccc;
    }
  }
  // .amapClass{
  //   margin-left:10px;
  // }
</style>
